<script lang="ts" setup>
	//提交售后原因--仅退款&&退货退款
	import { reactive, ref } from "vue";
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '@/pinia';
	import form from "../../../uni_modules/uview-plus/libs/config/props/form";
	let router = useRouter()
	const userStoreInfo = userStore();
	const {
		proxy,
	} = getCurrentInstance()
	let itemObj = ref(null)
	let postId = ref()
	let ObjArr = ref(null)
	let howAll = ref(0)
	onLoad((options) => {
		console.log(options);
		howAll.value = options.all
		if (options.all == 0) {
			//0的情况下是单个商品/item是单个商品对象
			console.log(JSON.parse(options.item), '--------+++++++++++++++++--------');
			// itemObj.value = JSON.parse(options.item)
			ObjArr.value = [JSON.parse(options.item)]
			form1.value.num = ObjArr.value.length
			postId.value = options.id
			getDetail(howAll.value)
		} else {
			//1是所有商品/item是整个记录对象
			// console.log(JSON.parse(options.item), '--------+++++++++++++++++--------');
			// itemObj.value = JSON.parse(options.item)
			// ObjArr.value = JSON.parse(options.item).orderInfoList
			postId.value = options.id
			getDetail(howAll.value)
		}
	})
	const getDetail = (e) => {
		proxy.$req('GET', proxy.$api.orderDetail, {
			id: postId.value,
		}).then((res) => {
			console.log(res);
			if (e == 1) {
				itemObj.value = res.result
				ObjArr.value = res.result.orderInfoList
				form1.value.num = res.result.orderInfoList.length
			} else {
				itemObj.value = res.result
			}

		})
	}
	onShow(() => {
		setTimeout(() => {
			getDetail(howAll.value)
		}, 100)
	})
	let formRef = ref(null)
	let form1 = ref({
		num: '',
		reason: '',
		// money: '',
		message: '',
		beizhu: ''
	})
	let rules = ref({
		num: {
			type: 'string',
			required: true,
			message: '输入不合法',
			trigger: ['blur', 'change']
		},
		reason: {
			type: 'string',
			required: true,
			message: '输入不合法',
			trigger: ['blur', 'change']
		},
		// money: {
		// 	type: 'string',
		// 	required: true,
		// 	message: '输入不合法',
		// 	trigger: ['blur', 'change']
		// },
		message: {
			type: 'string',
			required: true,
			message: '输入不合法',
			trigger: ['blur', 'change']
		},
	})
	const choseReason = () => {
		let arr = ['到期了', '不想使用了', '货物与描述不符', '货物使用问题太多'];
		uni.showActionSheet({
			itemList: arr,
			success: function (res) {
				console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
				form1.value.reason = arr[res.tapIndex]

			},
			fail: function (res) {
				console.log(res.errMsg);
			}
		});
	}
	const routerLink = (e) => {
		router.push({
			name: e,
			params: {}
		})
	}
	let fileList1 = ref([])
	const afterRead = (e) => {
		console.log(e);
		const item = e.file;
		uni.showLoading({
			title: '上传中',
		})
		for (let a = 0; a <= item.length; a++) {
			uni.uploadFile({
				url: proxy.$uploadUrl + proxy.$api.uploadFile,
				filePath: item[a].url,
				name: 'file',
				formData: {
					file: item[a].url,
				},
				success: (uploadFileRes) => {
					console.log(JSON.parse(uploadFileRes.data));
					if (!JSON.parse(uploadFileRes.data).success) {
						uni.showToast({
							title: JSON.parse(uploadFileRes.data).message,
							icon: 'none'
						})
						return
					}
					let result = JSON.parse(uploadFileRes.data).result
					uni.hideLoading()
					fileList1.value.push(
						Object.assign({}, {
							url: result,
						})
					);
					console.log(fileList1.value);
				},
				complete() { }
			});
		}
	}
	const deletePic = (e) => {
		console.log(e);
		fileList1.value.splice(e.index, 1)
	}
	const submitShou = () => {
		let data = ObjArr.value.map((item) => {
			return {
				productId: item.productId,
				refundNum: form1.value.num,
				refundReasonWap: form1.value.reason,
				refundReasonRemark: form1.value.message,
				remark: form1.value.beizhu,
			}
		})
		proxy.$req('POST', proxy.$api.jihuanShenqing, {
			id: postId.value,
			returnList: data,
			sendbackStatus: 1,
		}).then((res) => {
			console.log(res);
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			if (res.success) {
				uni.navigateBack({
					delta: 1
				})
			}
		})
	}
</script>
<template>
	<view class="boxAll" v-if="itemObj!=null">
		<view class="con" v-for="(item,index) in ObjArr" :key="index">
			<image class="conL" :src="item.sku!=null?item.sku.logo:item.info.image" mode=""></image>
			<view class="conR">
				<view class="rl c-flex-center-start">
					<text class="u-line-1" style="font-size: 28rpx;font-weight: 500;">{{ item.productName }}</text>
					<text
						style="font-size: 24rpx;color: rgba(0,0,0,0.45);padding-left: 32rpx;margin-top: 14rpx;">规格：{{ item.sku!=null?item.sku.specIdsName:'' }}</text>
				</view>
				<view class="rr">
					<text class="intFont"><text style="font-size: 20rpx;">￥</text> {{ item.price }}</text>
					<text>×{{ item.cartNum }}</text>
				</view>
			</view>
		</view>
	</view>
	<view class="formBox" v-if="itemObj!=null">
		<u--form labelPosition="left" :model="form1" :rules="rules" ref="formRef" labelWidth="150rpx">
			<view class="boxCon">
				<u-form-item class="formItem" label="寄还数量" prop="num" borderBottom>
					<u--input v-model="form1.num" border="none" disabledColor="#fff" placeholder="请输入退货数量"></u--input>
				</u-form-item>
				<u-form-item class="formItem" label="寄还原因" prop="reason" borderBottom @click="choseReason">
					<u--input v-model="form1.reason" border="none" disabled disabledColor="#fff" placeholder="点击选择退款原因"
						:customStyle="{pointerEvents:'none'}"></u--input>
					<u-icon name="arrow-right"></u-icon>
				</u-form-item>
			</view>
			<view class="boxCon">
				<u-form-item class="formItem" label="退款金额" prop="money" borderBottom>
					<!-- <u--input v-model="form.money" border="none"></u--input> -->
					<view class="money intFont">
						<text>￥</text>
						<text>{{ itemObj.totalPrice }}</text>
					</view>
				</u-form-item>
				<u-form-item class="formItem" label="退款说明" prop="message" borderBottom>
					<u--input v-model="form1.message" border="none" placeholder="选填"></u--input>
				</u-form-item>
				<u-form-item class="formItem" label="备注" prop="message" borderBottom>
					<textarea v-model="form1.beizhu" style="width: 100%;" col="3" placeholder="请输入备注"></textarea>
				</u-form-item>
			</view>
		</u--form>
	</view>
	<!-- <view class="uploadImg">
		<text style="font-size: 28rpx;font-weight: 400;color: rgba(0,0,0,0.85);">上传凭证 <text
				style="color: rgba(0,0,0,0.45);">（最多三张）</text></text>
		<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
			:maxCount="3"></u-upload>
	</view> -->
	<view class="subBtn" @click="submitShou">
		提交
	</view>
</template>
<style lang="scss">
	page {
		background-color: #fafafa;
	}

	:deep(.uni-input-input) {
		text-align: right;
	}

	:deep(.uni-input-placeholder) {
		text-align: right;
	}

	.boxAll {
		box-sizing: border-box;
		margin: 32rpx auto;
		width: 686rpx;
		height: 240rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		padding: 32rpx;

		.con {
			width: 100%;
			height: 176rpx;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;

			.conL {
				width: 176rpx;
				height: 176rpx;
			}

			.conR {
				width: 426rpx;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;

				.rl {
					width: 338rpx;
					font-size: 28rpx;
				}

				.rr {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-end;
					font-size: 28rpx;
				}
			}
		}

	}

	.formBox {
		width: 686rpx;
		margin: 0 auto;

		.boxCon {
			box-sizing: border-box;
			width: 686rpx;
			// height: 224rpx;
			background: #FFFFFF;
			box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
			border-radius: 24rpx;
			border: 2rpx solid #FFFFFF;
			margin: 32rpx 0;
			padding: 28rpx 32rpx;

			.money {
				width: 100%;
				text-align: right;

				text:nth-child(1) {
					font-size: 20rpx;
					font-weight: bold;
					color: #F22F19;
				}

				text:nth-child(2) {
					font-size: 34rpx;
					color: #F22F19;
				}
			}
		}

		.formItem {
			text-align: right;
		}
	}

	.uploadImg {
		box-sizing: border-box;
		width: 686rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		margin: 0 auto;
		padding: 32rpx;


		text {
			display: inline-block;
			margin-bottom: 20rpx;
		}
	}

	.subBtn {
		width: 686rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #CB645E;
		border-radius: 16rpx;
		position: fixed;
		bottom: 70rpx;
		left: 32rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>